<div class="row">
    <div class="twelf columns">
        <h3 class="no-margin" id="header">PTZ</h3>
        <hr class="tiny-margin"/>
        <div id="ptz_description" class="row">
            <p>
                In this page you can move your cam.
            </p>
        </div>
        <div id="ptz_unavailable" class="row" style="display: none;">
            <p>
                PTZ functions are not available for this camera model.
            </p>
        </div>

        <div id="ptz_main" class="row" >
            <h4 class="no-margin">Move pad</h4>
            <hr class="tiny-margin"/>
            <img id="imgSnap" src="img/loading.gif" width="35%"/>

            <table class="u-full-width ptz-table">
                <tbody>
                <tr class="row">
                    <td><input type="image" id="img-ul" src="img/arrow-up-right-bold-box-outline.png" /></td>
                    <td><input type="image" id="img-au" src="img/arrow-up-bold-box-outline.png" /></td>
                    <td><input type="image" id="img-ur" src="img/arrow-up-right-bold-box-outline.png" /></td>
                </tr>
                <tr class="row">
                    <td><input type="image" id="img-al" src="img/arrow-up-bold-box-outline.png" /></td>
                    <td><input type="image" id="img-home" src="img/home.png" /></td>
                    <td><input type="image" id="img-ar" src="img/arrow-up-bold-box-outline.png" /></td>
                </tr>
                <tr class="row">
                    <td><input type="image" id="img-dl" src="img/arrow-up-right-bold-box-outline.png" /></td>
                    <td><input type="image" id="img-ad" src="img/arrow-up-bold-box-outline.png" /></td>
                    <td><input type="image" id="img-dr" src="img/arrow-up-right-bold-box-outline.png" /></td>
                </tr>
                </tbody>
            </table>

            <h4 class="no-margin">Go to Preset</h4>
            <hr class="tiny-margin"/>
            <div class="row">
                <div class="twelve columns configs-switch">
                    <table class="u-full-width padded-table config-table">
                        <tbody>
                        <tr class="row">
                            <td>Preset Number</td>
                            <td>
                                <div id="select-goto-container" class="standard-select">
                                </div>
                                <span class="switch-description">
                                    Number of the preset.
                                </span>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>

            <div class="float-right">
                <input class="button-primary" type="button" id="button-goto" value="Go To Preset"/>
            </div>

            <br/>

            <h4 class="no-margin">Add Preset</h4>
            <hr class="tiny-margin"/>
            <div class="row">
                <div class="twelve columns configs-switch">
                    <table class="u-full-width padded-table config-table">
                        <tbody>
                        <tr class="row">
                            <td>Preset Name</td>
                            <td>
                                <input class="u-full-width" type="text" placeholder="" data-key="PRESET_NAME" id="PRESET_NAME"/>
                                <span class="switch-description">
                                    Name of the preset to add (space char is not allowed).
                                </span>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>

            <div class="float-right">
                <input class="button-primary" type="button" id="button-add" value="Add Preset"/>
            </div>

            <h4 class="no-margin">Delete Preset</h4>
            <hr class="tiny-margin"/>
            <div class="row">
                <div class="twelve columns configs-switch">
                    <table class="u-full-width padded-table config-table">
                        <tbody>
                        <tr class="row">
                            <td>Preset Number</td>
                            <td>
                                <div id="select-del-container" class="standard-select">
                                </div>
                                <span class="switch-description">
                                    Number of the preset to remove.
                                </span>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>

            <div class="float-right">
                <input class="button-primary" type="button" id="button-del-all" value="Delete All Preset"/>
                &nbsp;
                <input class="button-primary" type="button" id="button-del" value="Delete Preset"/>
            </div>
        </div>
    </div>
</div>
